<template>
 <div class="login-bg wh-full">
     <div class="form-box bg-f pos-abs">
         <p class="font-36px text-center mar-tb-20px">LEARN-WEB</p>
        <el-form :model="registerParams" status-icon  ref="registerForm"
            class="login-form" :rules="rules">
            <el-form-item  prop="username">
                <el-input type="text" v-model="registerParams.username"
                    autocomplete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item  prop="mailbox">
                <el-input type="text" v-model="registerParams.mailbox"
                    autocomplete="off" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
                <el-input type="password" v-model="registerParams.password"
                        autocomplete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item  prop="confirmPassword">
                <el-input type="password" v-model="confirmPassword"
                        autocomplete="off" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item class="text-center">
                <el-button type="primary"
                    @click="registr('registerForm')"  class="w-full">注册</el-button>
                    <span class="col-409eff pointer" @click="login">去登陆</span>
            </el-form-item>
        </el-form>
     </div>
 </div>
</template>
<script>
import REG from "utils/reg"
import http from "network/http"
export default {
  name: 'Index',
  data(){
      return {
          registerParams:{
              username: '',
              password: '',
              mailbox: ''
          },
          confirmPassword:'',
          rules:{
              username:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
              ],
              mailbox: [
                { required: true, message: '请输入邮箱', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
          }
      }

  },
  components: {
  },
  methods:{
      registr(ref){
         this.$refs[ref].validate((state)=>{
             let form = this.$refs[ref] ;
             let registerParams = this.registerParams ;
             if(state){
                 if(!REG.username.test(registerParams.username)){
                     this.$message.error('用户名只能是字母和数字4到8位');
                     return
                 }
                 if(!REG.email.test(registerParams.mailbox)){
                     this.$message.error('邮箱格式不正确');
                     return
                 }else if(!REG.password.test(registerParams.password)){
                     this.$message.error('密码必须包含数字或字母6-20位');
                    return
                 }else if(this.confirmPassword !== registerParams.password){
                     this.$message.error('密码和确认密码不一致');
                    return
                 }
                 http.post("/authen/register",this.registerParams,{
                     reqType: 'json'
                 })
                 .then(res=>{
                     res.execute(data=>{
                         this.$message("注册成功");
                         this.$store.state.username = this.registerParams.username
                         this.$store.state.password = this.registerParams.password
                         setTimeout(()=>{
                             this.$router.replace({path: '/login'})
                         },1000)
                     },error=>{
                         this.$message.error(error.status.msg)
                     })
                 })

             }
         })
      },
      login(){
          this.$router.replace("/login")
      }
  }
}
</script>

<style>
@import "~@/assets/css/login.css";
</style>
